<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-input"
		:class="_classes"
		:style="_styles"
	>
		<slot name="before">
			<view
				class="pure-input__icon pure-input__icon--before"
				v-if="beforeIconName"
			>
				<pure-icon
					:name="beforeIconName"
					v-bind="beforeIconOpts"
				></pure-icon>
			</view>
		</slot>
		<input
			class="pure-input__input"
			:type="type"
			:value="modelValue"
			:text-content-type="textContentType"
			:password="password"
			:placeholder="placeholder"
			:placeholder-style="placeholderStyle"
			:placeholder-class="placeholderClass"
			:maxlength="maxlength"
			:cursor-spacing="cursorSpacing"
			:focus="focus"
			:confirm-type="confirmType"
			:confirm-hold="confirmHold"
			:cursor="cursor"
			:cursor-color="cursorColor"
			:selection-start="selectionStart"
			:selection-end="selectionEnd"
			:adjust-position="adjustPosition"
			:auto-blur="autoBlur"
			:ignoreCompositionEvent="ignoreCompositionEvent"
			:always-embed="alwaysEmbed"
			:hold-keyboard="holdKeyboard"
			:safe-password-cert-path="safePasswordCertPath"
			:safe-password-length="safePasswordLength"
			:safe-password-time-stamp="safePasswordTimeStamp"
			:safe-password-nonce="safePasswordNonce"
			:safe-password-salt="safePasswordSalt"
			:safe-password-custom-hash="safePasswordCustomHash"
			:random-number="randomNumber"
			:controlled="controlled"
			:always-system="alwaysSystem"
			:inputmode="inputmode"
			@focus="onFocus"
			@input="onInput"
			@blur="onBlur"
			@confirm="onConfirm"
			@keyboardheightchange="onKeyboardheightchange"
		/>
		<view
			class="pure-input__clear"
			v-if="clearable && modelValue?.toString?.()?.length > 0"
			@tap="handleClear"
		>
			<pure-icon
				:name="clearIconName"
				v-bind="clearIconOpts"
			></pure-icon>
		</view>
		<slot name="after">
			<view
				class="pure-input__icon pure-input__icon--after"
				v-if="afterIconName"
			>
				<pure-icon
					:name="afterIconName"
					v-bind="afterIconOpts"
				></pure-icon>
			</view>
		</slot>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, inject, useAttrs } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Injects
	const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([
		"onInput",
		"onFocus",
		"onBlur",
		"onConfirm",
		"onKeyboardHeightChange",
		"update:modelValue",
		"onClear"
	]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 禁用
		if (_props.disabled) array.push("pure-input--disabled");

		// 只读
		if (_props.readonly) array.push("pure-input--readonly");

		// 聚焦时边框类型
		if (_props.focusType) array.push(`pure-input--focus-type--${_props.focusType}`);

		// 聚焦边框颜色
		if (_props.focusBorderColor) array.push(`--pure-input-focus-border-color: ${_props.focusBorderColor}`);

		// 宽
		if (_props.width) array.push(`--pure-input-width: ${_props.width}`);

		// 高
		if (_props.height) array.push(`--pure-input-height: ${_props.height}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 获取焦点事件
	function onFocus(e) {
		_emits("onFocus", e);
	}

	// 失去焦点事件
	function onBlur(e) {
		_emits("onBlur", e);
		PureFormItemOnBlur?.();
	}

	// 输入事件
	function onInput(e) {
		const value = formatValue(e.detail.value);
		_emits("update:modelValue", value);
		_emits("onInput", e);
		if (_props?.modelValue !== e.detail.value) PureFormItemOnChange?.();
	}

	// 确认事件
	function onConfirm(e) {
		_emits("onConfirm", e);
	}

	// 键盘高度变化事件
	function onKeyboardheightchange(e) {
		_emits("onKeyboardHeightChange", e);
	}

	// 格式化值
	function formatValue(value) {
		if (value === "" || value === null || value === undefined) return value;

		// 数字格式
		if (_props?.type === "number" || _props?.type === "decimal" || _props?.type === "numeric")
			value = Number(value);

		return value;
	}

	// 清空
	function handleClear() {
		_emits("update:modelValue", "");
		_emits("onClear");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
